/* Chart layout styles: single owner for chart controls, chart viewport, and chart overlays. */

html body #chart-controls,
html body #chart-controls.panel.controls,
html body .chart-controls {
  box-sizing: border-box !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body #chart-root,
html body #chart-root.chart-area,
html body .chart-area {
  box-sizing: border-box !important;
  width: calc(100vw - 12px) !important;
  max-width: calc(100vw - 12px) !important;
  margin-left: calc(50% - 50vw + 12px) !important;
  margin-right: calc(50% - 50vw) !important;
}

html body #chart-root.chart-area,
html body .chart-area {
  height: clamp(460px, calc(100vh - 270px), 760px) !important;
  min-height: 460px !important;
}

html body #chart-root.chart-area > div,
html body .chart-area > div {
  width: 100% !important;
  height: 100% !important;
}

html body #chart-root.chart-area > .chart-metrics-overlay,
html body .chart-area > .chart-metrics-overlay {
  width: min(150px, calc(100% - 20px)) !important;
  max-width: 150px !important;
  height: auto !important;
  min-height: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

html body #chart-root.chart-area > .chart-status-overlay,
html body .chart-area > .chart-status-overlay {
  width: max-content !important;
  max-width: calc(100% - 20px) !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
}

html body #chart-root.chart-area > .chart-bottom-nav,
html body .chart-area > .chart-bottom-nav {
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 66px !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  pointer-events: none !important;
}

html body #chart-root.chart-area > .chart-bottom-nav .chart-bottom-prev,
html body #chart-root.chart-area > .chart-bottom-nav .chart-bottom-next,
html body .chart-area > .chart-bottom-nav .chart-bottom-prev,
html body .chart-area > .chart-bottom-nav .chart-bottom-next {
  pointer-events: auto !important;
  opacity: 0.82 !important;
}

@media (max-width: 700px) {
  html body #chart-root.chart-area,
  html body .chart-area {
    height: clamp(420px, calc(100vh - 220px), 680px) !important;
    min-height: 420px !important;
  }
}